*
  box-sizing border-box
div#swiper_container
  background rgba(255, 255, 255, 0);
.blog-slider
  width 100%
  position relative
  border-radius 12px 8px 8px 12px
  margin auto
  background var(--global-bg)
  padding: 10px
  transition all .3s

.blog-slider__item
  display flex
  align-items center
  &.swiper-slide-active
    .blog-slider__img
      img
        opacity 1
        transition-delay .3s
    .blog-slider__content
      & > *
        opacity 1
        transform none
      & > *:nth-child(1)
        transition-delay 0.3s
      & > *:nth-child(2)
        transition-delay 0.4s
      & > *:nth-child(3)
        transition-delay 0.5s
      & > *:nth-child(4)
        transition-delay 0.6s
      & > *:nth-child(5)
        transition-delay 0.7s
      & > *:nth-child(6)
        transition-delay 0.8s
      & > *:nth-child(7)
        transition-delay 0.9s
      & > *:nth-child(8)
        transition-delay 1s
      & > *:nth-child(9)
        transition-delay 1.1s
      & > *:nth-child(10)
        transition-delay 1.2s
      & > *:nth-child(11)
        transition-delay 1.3s
      & > *:nth-child(12)
        transition-delay 1.4s
      & > *:nth-child(13)
        transition-delay 1.5s
      & > *:nth-child(14)
        transition-delay 1.6s
      & > *:nth-child(15)
        transition-delay 1.7s



.blog-slider__img
  width 200px
  flex-shrink 0
  height 200px
  padding 10px
  border-radius 5px
  transform translateX(0px)
  overflow hidden
  &:after
    content ''
    position absolute
    top 0
    left 0
    width 100%
    height 100%
    border-radius 5px
    opacity 0.8
  img
    width 100%
    height 100%
    object-fit cover
    display block
    opacity 0
    border-radius 5px
    transition all .3s

.blog-slider__content
  padding-right 50px
  padding-left 50px
  & > *
    opacity 0
    transform translateY(25px)
    transition all .4s


.blog-slider__code
  color var(--font-color)
  margin-bottom 0px
  display block
  font-weight 500

.blog-slider__title
  font-size 18px
  font-weight 700
  color var(--font-color)
  margin-bottom 15px
  -webkit-line-clamp 1
  display -webkit-box
  overflow hidden
  -webkit-box-orient vertical

.blog-slider__text
  color var(--font-color)
  -webkit-line-clamp 1
  display -webkit-box
  overflow hidden
  -webkit-box-orient vertical
  margin-bottom 15px
  line-height 1.5em
  width 100%
  display block
  word-break break-all
  word-wrap break-word

.blog-slider__button
  display inline-flex
  background-color var(--btn-bg)
  padding 4px 14px
  border-radius 8px
  color var(--btn-color)
  text-decoration none
  font-weight 500
  justify-content center
  text-align center
  letter-spacing 1px
  display none
  &:hover
    background-color var(--btn-hover-color)
    color var(--btn-color)

.blog-slider .swiper-container-horizontal > .swiper-pagination-bullets, .blog-slider .swiper-pagination-custom, .blog-slider .swiper-pagination-fraction
  bottom 10px
  left 0
  width 100%

.blog-slider__pagination
  position absolute
  z-index 21
  right 20px
  width 11px !important
  text-align center
  left auto !important
  top 50%
  bottom auto !important
  transform translateY(-50%)
  &.swiper-pagination-bullets
    .swiper-pagination-bullet
      margin 8px 0
  .swiper-pagination-bullet
    width 11px
    height 11px
    display block
    border-radius 10px
    background #858585
    opacity 0.2
    transition all .3s
  .swiper-pagination-bullet-active
    opacity 1
    background var(--btn-bg)
    height 30px

@media screen and (max-width: 600px)
  .blog-slider__pagination
    transform translateX(-50%)
    left 50% !important
    top 320px
    width 100% !important
    display flex
    justify-content center
    align-items center

  .blog-slider__pagination
    &.swiper-pagination-bullets
      .swiper-pagination-bullet
        margin 0 5px

  .blog-slider__pagination
    .swiper-pagination-bullet-active
      height 11px
      width 30px

  .blog-slider__button
    display inline-flex
    width 100%
  .blog-slider__text
    margin-bottom 40px

  .blog-slider
    min-height 350px
    height auto
    margin-top 110px
    margin-bottom 10px

  .blog-slider__content
    margin-top -80px
    text-align center
    padding 0 30px

  .blog-slider__item
    flex-direction column

  .blog-slider__img
    transform translateY(-50%)
    width 90%



  .blog-slider__content
    padding-left 10px
    padding-right 10px

  .blog-slider__pagination.swiper-pagination-clickable.swiper-pagination-bullets
    top 110px


@media screen and (min-width: 600px)
  .blog-slider
    height 200px

  .blog-slider__img
    height 200px
